<template>

  <el-dialog :title="id ? '商户修改' : '商户添加'" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="120px" :inline="true" >
      <el-form-item label="商户号" size="mini" v-if="id != null && id != ''">
        <el-input placeholder="" v-model="form.mchNo" @keyup.enter.native="submit" disabled></el-input>
      </el-form-item>

      <el-form-item label="商户名称" size="mini" prop="mchName">
        <el-input placeholder="" v-model="form.mchName" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="appId" size="mini" v-if="id != null && id != ''">
        <el-input placeholder="" ref="appId" v-model="form.appId" readonly></el-input>
        <el-link type="primary" @click="copyData('appId', form.appId)">复制</el-link>
      </el-form-item>

      <el-form-item label="appSecret" size="mini" v-if="id != null && id != ''">
        <el-input placeholder="" ref="appSecret" v-model="form.appSecret" readonly></el-input>
        <el-link type="primary" @click="copyData('appSecret', form.appSecret)">复制</el-link>
      </el-form-item>

      <el-form-item label="qq" size="mini">
        <el-input placeholder="" v-model="form.qq" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="联系人" size="mini" prop="contact">
        <el-input placeholder="" v-model="form.contact" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="联系电话" size="mini" prop="mobile">
        <el-input placeholder="" v-model="form.mobile" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="类型" size="mini" prop="type">
        <el-select v-model="form.type" size="small" clearable>
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="注册地址" size="mini">
        <el-input placeholder="" v-model="form.address" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-row>
        <el-form-item label="合同有效期" size="mini" prop="contractFromTime">
          <el-date-picker
            v-model="contractDateRange"
            @change="handleContractDateRangeChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>  
      </el-row>

      <el-form-item label="业务员" size="mini">
        <el-select v-model="form.salesId" size="small" clearable>
          <el-option
            v-for="item in salesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="代理商" size="mini">
        <el-select v-model="form.agentId" size="small" clearable>
          <el-option
            v-for="item in agentOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标签" size="mini">
        <el-select v-model="form.mchTagId" size="small" clearable style="width: 100px;">
          <el-option
            v-for="item in mchTagOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="form.mchTagHandType" size="small" clearable style="width: 100px;">
          <el-option
            v-for="item in mchTagHandTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="email" size="mini">
        <el-input placeholder="" v-model="form.email" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="行业" size="mini">
        <el-select v-model="form.industry" size="small" clearable>
          <el-option
            v-for="item in industryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="OA单号" size="mini">
        <el-input placeholder="" v-model="form.oaNo" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>

      <el-form-item label="直连状态" size="mini" prop="linkStatus">
        <el-select v-model="form.linkStatus" size="small" clearable>
          <el-option
            v-for="item in linkStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="开通状态" size="mini" prop="openStatus">
        <el-select v-model="form.openStatus" size="small" clearable>
          <el-option
            v-for="item in openStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="登录状态" size="mini" prop="loginStatus">
        <el-select v-model="form.loginStatus" size="small" clearable>
          <el-option
            v-for="item in loginStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" size="mini">
        <el-input placeholder="" v-model="form.remark" @keyup.enter.native="submit" clearable></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <!-- <el-popover
        v-if="id != null"
        placement="top"
        width="160"
        v-model="popDeleteVisible">
        <p>确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
          <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
        </div>
        <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
      </el-popover> -->

      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.info';
import MemberApiMain from '@/api/system.member';
import MchTagApiMain from '@/api/platform.mchTag';
import { industryOptions, mchTypeOptions, loginStatusOptions, openStatusOptions, linkStatusOptions } from '@/const/constant'

export default {
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        mchName: '',
        appId: '',
        appSecret: '',
        qq : '',
        contact : '',
        mobile : '',
        type: '',
        address : '',
        contractFromTime : '',
        contractToTime : '',
        salesId: '',
        mchTagId: '',
        mchTagHandType: '1',
        email : '',
        industry : '',
        oaNo: '',
        agentId: '',
        linkStatus : '',
        reviewStatus : 0,
        openStatus : '',
        loginStatus : '',
        remark : '',
      },

      rules: {
        mchName: [
          { required: true, message: '请输入商户名称', trigger: 'blur' },
        ],
        contact: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '请输入联系人手机号', trigger: 'blur' },
        ],
        contractFromTime: [
          { required: true, message: '请输入合同有效期', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' },
        ],
        linkStatus: [
          { required: true, message: '请选择直连状态', trigger: 'blur' },
        ],
        openStatus: [
          { required: true, message: '请选择开通状态', trigger: 'blur' },
        ],
        loginStatus: [
          { required: true, message: '请选择登录状态', trigger: 'blur' },
        ],
      },

      id  : null,
      data: null,

      industryOptions: industryOptions,
      typeOptions: mchTypeOptions,
      openStatusOptions: openStatusOptions,
      linkStatusOptions: linkStatusOptions,
      loginStatusOptions: loginStatusOptions,
      contractDateRange: [],
      salesOptions: [],
      agentOptions: [],
      mchTagOptions: [],
      mchTagHandTypeOptions: [
        { label: '一手', value: '1' },
        { label: '二手', value: '2' }
      ]
    }
  },
  mounted () {
  },

  methods: {

    show (id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.fetchSalesOptions();
      this.fetchAgentOptions();
      this.fetchMchTagOptions();

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset () {
      this.form = {
        mchName: '',
        appId: '',
        appSecret: '',
        qq : '',
        contact : '',
        mobile : '',
        type: '',
        address : '',
        contractFromTime : '',
        contractToTime : '',
        salesId: '',
        mchTagId: '',
        mchTagHandType: '1',
        email : '',
        industry : '',
        oaNo: '',
        agentId: '',
        linkStatus : '',
        reviewStatus : 0,
        openStatus : '',
        loginStatus : '',
        remark : '',
      };
      this.contractDateRange = []
    },

    handleContractDateRangeChange () {
      this.form.contractFromTime = this.contractDateRange.length > 0 ? this.contractDateRange[0] : ''
      this.form.contractToTime = this.contractDateRange.length > 0 ? this.contractDateRange[1] : ''
    },

    fetchSalesOptions () {
      MemberApiMain.getOption({extraType: 1})
      .then(re => {
        this.salesOptions = re; 
      })
    },

    fetchAgentOptions () {
      MemberApiMain.getOption({extraType: 2})
      .then(re => {
        this.agentOptions = re; 
      })
    },

    fetchMchTagOptions () {
      MchTagApiMain.option()
      .then(re => {
        this.mchTagOptions = re; 
      })
    },

    fetchData () {

      ApiMain.info({id: this.id})
      .then(re => {
        this.data = re; 
      })
      .catch(() => {
        this.data = null;
      })
      .finally(() => {
        this.renderData();
      });
    },

    renderData () {
      this.form.mchNo = this.data.mchNo;
      this.form.mchName = this.data.mchName;
      this.form.appId = this.data.appId;
      this.form.appSecret = this.data.appSecret;
      this.form.qq = this.data.qq;
      this.form.contact = this.data.contact;
      this.form.mobile = this.data.mobile;
      this.form.type = this.data.type;
      this.form.address = this.data.address;
      this.form.contractFromTime = this.data.contractFromTime;
      this.form.contractToTime = this.data.contractToTime;
      this.form.salesId = this.data.salesId;
      this.form.mchTagId = this.data.mchTagId;
      this.form.mchTagHandType = this.data.mchTagHandType;
      this.form.email = this.data.email;
      this.form.industry = this.data.industry;
      this.form.oaNo = this.data.oaNo;
      this.form.agentId = this.data.agentId;
      this.form.linkStatus = this.data.linkStatus;
      this.form.reviewStatus = this.data.reviewStatus;
      this.form.openStatus = this.data.openStatus;
      this.form.loginStatus = this.data.loginStatus;
      this.form.remark = this.data.remark;
      this.contractDateRange = [new Date(this.data.contractFromTime), new Date(this.data.contractToTime)]
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({id: this.id});

      this.loading = false;
      this.close();
      this.$message({message: '删除成功', type: 'success'});
    },

    async submitSet () {

      this.form.id = this.id;
      await ApiMain.set(this.form);
      this.$message({message: '修改成功', type: 'success'});
      this.close();

    },

    async submitAdd () {

      await ApiMain.add(this.form);
      this.$message({message: '添加成功', type: 'success'});
      this.close();
    },

    copyData (ref, val) {
      this.$refs[ref].select()
      document.execCommand('copy');
      this.$message({message: '已复制', type: 'success'});
    },

  }
}
</script>

<style>

</style>
